import logo from "@images/home/logo.png";
import styles from "@styles/home/home.module.less";

import React, { useState, useEffect } from "react";
import { Layout, Menu, Breadcrumb } from "antd";
import { Link } from "react-router-dom";
import {
  UserOutlined,
  PieChartOutlined,
  DesktopOutlined,
  FileOutlined,
} from "@ant-design/icons";
import ShowDropdown from "@components/dropdown";

import Http from "@utils/api";

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

export default function Index({ children }) {
  const [collapsed, setCollapsed] = useState(false);
  const [level, setLevel] = useState([]);
  const [iswidth, setIswisth] = useState({});

  /** 调用“活动助手” */
  useEffect(() => {
    Http.getTable({}).then(({ data }) => {
      setLevel(data);
    });

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  /** 侧边栏 sider，展开-收起 */
  const onCollapse = () => {
    setCollapsed(!collapsed);
    collapsed
      ? setIswisth({
          width: "calc(100% - 200px)",
        })
      : setIswisth({
          width: "calc(100% - 80px)",
        });
  };

  return (
    <Layout className={styles.homepage}>
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className={styles.logo}>
          <img src={logo} className="App-logo" alt="logo" />
        </div>
        <Menu
          theme="dark"
          defaultOpenKeys={["option1"]}
          defaultSelectedKeys={["2"]}
          mode="inline"
        >
          <SubMenu key="option1" icon={<UserOutlined />} title="秦学后台">
            <Menu.Item key="1" icon={<DesktopOutlined />}>
              <Link to="/lotteryWhiteList"> 抽奖白名单 </Link>
            </Menu.Item>
            <Menu.Item key="2" icon={<PieChartOutlined />}>
              <Link to="/createActivity"> 创建活动 </Link>
            </Menu.Item>
            <Menu.Item key="3" icon={<FileOutlined />}>
              <Link to="/activityComment"> 活动评论 </Link>
            </Menu.Item>
          </SubMenu>
        </Menu>
      </Sider>
      <Layout className={["site-layout", styles.rightbox]}>
        <Header
          style={iswidth}
          className={["site-layout-background", styles.headerbox]}
        >
          <h1>
            {(level || []).map((item) => (
              <Link to={item.menuUrl} key={item.toString()}>
                {item.menuName}
              </Link>
            ))}
          </h1>
          <ShowDropdown />
        </Header>
        <Content className={styles.contentbox}>
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>秦学后台</Breadcrumb.Item>
            {/* <Breadcrumb.Item>抽奖白名单</Breadcrumb.Item> */}
          </Breadcrumb>
          <div className="site-layout-background">{children}</div>
        </Content>
        <Footer className={styles.footerbox}>
          Ant Design ©2021 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
}
